<template>
  <div>
    <p>count值为 {{ count }}</p>
    <!--↓会影响视图变化-->
    <button @click="count += 1">count+1</button>
    <!--↓不会影响视图变化-->
    <button @click="add">add</button>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/composition-api";

export default {
  setup(props, ctx) {
    /** toRefs() 函数可以将 reactive() 创建出来的响应式对象, 转换为普通的对象, 只不过, 这个对象上的每个属性节点, 都是 ref()类型的响应式数据。 最常见的应用场景如下: */
    const state = reactive({ count: 0, name: "ahhh" });

    // 定义自增+1的函数
    const add = () => {
      console.log("state",state);
      console.log("state.count:",state.count); // ←会发现 的确是改变了state.count的值的 但是没有导致视图刷新 (但奇怪的是你直接在模板中state+=1会导致视图刷新,但我们通过add方法间接就不行)
      state.count += 1;
    };

    return {
      ...state,
      add
    };
  }
};
</script>

<style lang="scss" scoped></style>
